<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-tab-bar {
            height: 83px; /* 包含安全区域的高度 */
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding-bottom: 30px; /* 安全区域 */
            z-index: 50;
        }
        
        .ios-tab-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        .tab-label {
            font-size: 10px;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 127px); /* 状态栏 + 底部导航的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .service-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .service-icon.dark {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        /* 轮播指示器 */
        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 4px;
        }
        
        .carousel-indicator.active {
            width: 16px;
            background-color: white;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-tab-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .service-icon {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 顶部信息栏 -->
            <div class="px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white flex justify-between items-center">
                <div>
                    <div class="flex items-center">
                        <i class="fas fa-sun mr-1 text-yellow-300"></i>
                        <span class="text-sm">晴 26°C</span>
                    </div>
                    <div class="text-base font-semibold">智慧科技产业园</div>
                </div>
                <div class="relative">
                    <i class="fas fa-bell text-xl"></i>
                    <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-[10px]">3</div>
                </div>
            </div>
            
            <!-- 轮播图 -->
            <div class="relative h-44 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2069&auto=format&fit=crop" 
                     alt="Banner" 
                     class="w-full h-full object-cover">
                <div class="absolute bottom-3 left-0 right-0 flex justify-center">
                    <div class="carousel-indicator active"></div>
                    <div class="carousel-indicator"></div>
                    <div class="carousel-indicator"></div>
                </div>
            </div>
            
            <!-- 游客提示条（如果是游客模式） -->
            <div class="mx-4 my-3 px-4 py-3 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700/50 rounded-xl flex justify-between items-center">
                <div class="text-sm text-amber-700 dark:text-amber-300">您正在使用游客模式，部分功能受限</div>
                <button class="px-3 py-1 bg-amber-500 text-white text-xs rounded-full">立即登录</button>
            </div>
            
            <!-- 快捷功能区 -->
            <div class="mx-4 mb-4 glass-card p-4">
                <div class="grid grid-cols-4 gap-3">
                    <div class="flex flex-col items-center">
                        <div class="w-14 h-14 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-1">
                            <i class="fas fa-user-plus text-blue-500 dark:text-blue-400 text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">访客预约</span>
                    </div>
                    <a href="repair.html" class="flex flex-col items-center">
                        <div class="w-14 h-14 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-1">
                            <i class="fas fa-wrench text-green-500 dark:text-green-400 text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">设备报修</span>
                    </a>
                    <div class="flex flex-col items-center">
                        <div class="w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mb-1">
                            <i class="fas fa-file-invoice-dollar text-purple-500 dark:text-purple-400 text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">缴费管理</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-14 h-14 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center mb-1">
                            <i class="fas fa-car text-orange-500 dark:text-orange-400 text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">停车管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 园区公告 -->
            <div class="mx-4 mb-4">
                <div class="flex justify-between items-center mb-2">
                    <div class="text-base font-semibold text-gray-800 dark:text-gray-200">园区公告</div>
                    <div class="text-xs text-blue-500 dark:text-blue-400 flex items-center">
                        更多 <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
                    </div>
                </div>
                <div class="glass-card p-3">
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="w-2 h-2 rounded-full bg-red-500 mt-2 mr-2 flex-shrink-0"></div>
                            <div class="flex-1">
                                <div class="text-sm text-gray-800 dark:text-gray-200 line-clamp-1">关于园区停车场管理系统升级的通知</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">06-28</div>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="w-2 h-2 rounded-full bg-red-500 mt-2 mr-2 flex-shrink-0"></div>
                            <div class="flex-1">
                                <div class="text-sm text-gray-800 dark:text-gray-200 line-clamp-1">园区7月份物业费缴纳通知</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">06-25</div>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="w-2 h-2 rounded-full bg-gray-400 mt-2 mr-2 flex-shrink-0"></div>
                            <div class="flex-1">
                                <div class="text-sm text-gray-800 dark:text-gray-200 line-clamp-1">园区绿化养护工作通知</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">06-20</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 园区服务 -->
            <div class="mx-4 mb-4">
                <div class="flex justify-between items-center mb-2">
                    <div class="text-base font-semibold text-gray-800 dark:text-gray-200">园区服务</div>
                    <div class="text-xs text-blue-500 dark:text-blue-400 flex items-center">
                        更多 <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
                    </div>
                </div>
                <div class="glass-card p-3">
                    <div class="grid grid-cols-4 gap-3">
                        <div class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-water text-blue-500 dark:text-blue-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">送水服务</span>
                        </div>
                        <a href="repair.html" class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-wrench text-green-500 dark:text-green-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">报修服务</span>
                        </a>
                        <a href="car-binding.html" class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-car-side text-orange-500 dark:text-orange-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">车辆绑定</span>
                        </a>
                        <a href="decoration.html" class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-hammer text-amber-500 dark:text-amber-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">装修备案</span>
                        </a>
                        <div class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-broom text-green-500 dark:text-green-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">保洁服务</span>
                        </div>
                        <a href="parkInfo.html" class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-building text-indigo-500 dark:text-indigo-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">园区信息</span>
                        </a>
                        <a href="feedback.html" class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-comment-dots text-teal-500 dark:text-teal-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">问题反馈</span>
                        </a>
                        <div class="flex flex-col items-center">
                            <div class="service-icon">
                                <i class="fas fa-id-card text-pink-500 dark:text-pink-400"></i>
                            </div>
                            <span class="text-xs text-gray-700 dark:text-gray-300">人员入驻</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 园区资讯 -->
            <div class="mx-4 mb-4">
                <div class="flex justify-between items-center mb-2">
                    <div class="text-base font-semibold text-gray-800 dark:text-gray-200">园区资讯</div>
                    <div class="text-xs text-blue-500 dark:text-blue-400 flex items-center">
                        更多 <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
                    </div>
                </div>
                <div class="glass-card">
                    <div class="p-3 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex">
                            <img src="https://images.unsplash.com/photo-1497215842964-222b430dc094?q=80&w=2070&auto=format&fit=crop" 
                                 alt="News" 
                                 class="w-20 h-20 object-cover rounded-lg mr-3">
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-1">智慧园区建设成果展示</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">科技赋能产业升级，打造智慧园区新标杆</div>
                                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
                                    <span>06-26</span>
                                    <span>328阅读</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex">
                            <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop" 
                                 alt="News" 
                                 class="w-20 h-20 object-cover rounded-lg mr-3">
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-1">园区举办首届创新创业大赛</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">助力企业发展，促进产业集聚</div>
                                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
                                    <span>06-22</span>
                                    <span>156阅读</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- iOS 底部导航栏 -->
        <div class="ios-tab-bar">
            <div class="tab-item text-blue-500 dark:text-blue-400">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-bullhorn tab-icon"></i>
                <span class="tab-label">公告</span>
            </div>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-user tab-icon"></i>
                <span class="tab-label">我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .service-icon').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .service-icon').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .service-icon').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 